<template>
  <div class="contain">
    <el-amap-search-box class="search-box" :search-option="searchOption" :on-search-result="onSearchResult">
    </el-amap-search-box>
    <el-amap ref="map" vid="amapDemo" :center="center" :zoom="zoom" class="amap-demo" :plugin="plugin" :events="events">
      <el-amap-marker :position="center" key="100"></el-amap-marker>
    </el-amap>
    <div v-if="searchResult">
      详细地址 :{{ searchResult.locationName }},经度:{{ searchResult.longitude }},纬度:{{ searchResult.latitude
      }}
    </div>
  </div>
</template>
 
<script>
export default {
  name: 'AMapDemo',
  props: {
    // 定位
    position: {
      type: Array,
    },
  },
  data () {
    const vm = this;
    return {
      zoom: 12,
      center: [118.846309, 31.959469],
      searchOption: {
        // 限制搜索城市的范围
        citylimit: false
      },
      dataForm: {
        lat: null,
        lon: null,
        orgAddr: null,
        province: "",
        city: "",
        district: "",
      },
      amap: {
        markers: []
      },
      content: '',
      inputValue: '',
      searchResult: {
        address: '',
        latitude: '',
        longitude: '',
        name: '',
        type: '',
        country: '',
        province: '',
        city: '',
        area: '',
        township: '',
        street: '',
        neighborhood: '',
        locationName: ''
      },
      events: {
        // 点击获取地址的数据
        click (e) {
          const { lng, lat } = e.lnglat;
          vm.center = [lng, lat];
          // 这里通过高德 SDK 完成。
          var geocoder = new AMap.Geocoder({
            radius: 100,
            extensions: "all",
          });
          geocoder.getAddress([lng, lat], function (status, result) {
            if (status === "complete" && result.info === "OK") {
              if (result && result.regeocode) {
                console.log("点击获取地址的数据", result);
                vm.searchResult.locationName = result.regeocode.formattedAddress
                vm.searchResult.latitude = lat
                vm.searchResult.longitude = lng
                vm.sure();
              }
            }
          });
          vm.$nextTick();
        },
      },
      plugin: [
        {
          // 定位
          pName: "Geolocation",
          events: {
            init (o) {
              // o是高德地图定位插件实例
              o.getCurrentPosition((status, result) => {
                console.log("定位：", result);
                if (result && result.position) {
                  // 设置经度
                  vm.lng = result.position.lng;
                  // 设置维度
                  vm.lat = result.position.lat;
                  // 设置坐标
                  vm.amap.center = [vm.lng, vm.lat];
                  let op = {
                    position: [vm.lng, vm.lat],
                    text: result.formattedAddress,
                    offset: [0, 30],
                  };
                  vm.amap.markers.push(op);
                  // 页面渲染好后
                  vm.$nextTick();
                }
              });
            },
          },
        },
      ],

    }
  },
  watch: {
    position: {
      handler (val) {
        if (val) {
          this.center = val;
        } else {
          this.center = [118.846309, 31.959469]
        }
      },
    }
  },
  computed: {
    // getPosition () {
    //   return this.center;
    // },
  },
  methods: {
    onSearchResult (pois) {
      console.log(pois)
      let latSum = 0
      let lngSum = 0
      let that = this
      if (pois && pois.length > 0) {
        //如果长度为1则无需转化
        let poi = pois[0]
        let lng = poi["lng"]
        let lat = poi["lat"]
        that.center = [lng, lat]
        that.zoom = 13
        that.content = poi.name
        that.searchResult.address = poi.address
        that.searchResult.latitude = poi.lat
        that.searchResult.longitude = poi.lng
        let geocoder = new AMap.Geocoder({})
        geocoder.getAddress(that.center, function (status, result) {
          if (status === 'complete' && result.info === 'OK') {
            let obj = result.regeocode.addressComponent
            that.searchResult.locationName = obj.province + obj.city + obj.district + obj.township + obj.street +
              poi.address
            that.sure();
          }
        });
      } else {
        that.searchResult = []
      }
    },
    sure () {
      const vm = this;
      this.$emit("updateLocation", vm.searchResult);
    },
  }
}
</script>
 
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.amap-demo {
  width: 100%;
  height: 400px;
  position: relative;
}

.search-box {
  height: 35px;
  margin: 10px auto;
  width: calc(100% - 20px);
  // border-radius:16px;
  box-shadow: none;
  background: #ffff;
  border: 1px solid #e6e6e6;

  .search-box-wrapper {
    input {
      background: #fff;
      padding-left: 20px;
    }

    .search-btn {
      color: #2A67FE;
      width: 90px;
      height: 20px;
      box-sizing: border-box;
      border-left: 1px solid #D7D7D7;
    }
  }
}
</style>